<script setup lang="ts">
import dayjs from 'dayjs'
import { TRAIN_TYPE, SEAT_TYPE } from '@/constants/Constants'
import type { SearchConditions } from '@/types/SharedTypes'
import { reactive, watch } from 'vue'

// props
const props = defineProps<{
  departureStations: string[]
  targetStations: string[]
  searchConditions: SearchConditions
}>()

// 创建本地条件集合
const localSearchConditions: SearchConditions = reactive(props.searchConditions)

// 事件
const emit = defineEmits<{
  selectDepartureTime: [date: string]
  selectTrainType: [trainTypes: string[]]
  selectDepartureStation: [departureStation: string[]]
  selectTargetStation: [targetStation: string[]]
  selectSeatType: [seatTypes: string[]]
}>()

// 监视器
watch(localSearchConditions.departureStation, () => {
  emit('selectDepartureTime', localSearchConditions.departureTime)
})
watch(localSearchConditions.trainType, () => {
  emit('selectTrainType', localSearchConditions.trainType)
})
watch(localSearchConditions.departureStation, () => {
  emit('selectDepartureStation', localSearchConditions.departureStation)
})
watch(localSearchConditions.targetStation, () => {
  emit('selectTargetStation', localSearchConditions.targetStation)
})
watch(localSearchConditions.seatType, () => {
  emit('selectSeatType', localSearchConditions.seatType)
})

const optionalDay = [dayjs().format('YYYY-MM-DD')]
  .concat(Array.from({ length: 6 }, (_, index) => {
    return dayjs().add(index + 1, 'day').format('YYYY-MM-DD')
  }))

const isHoliday = ({ dayjs }) => {
  return optionalDay.includes(dayjs.format('YYYY-MM-DD'))
}

const selectAllTrainType = () => {
  const allTypesValues = TRAIN_TYPE.map(type => type.value)
  localSearchConditions.trainType = [...allTypesValues]
}
</script>

<template>
  <el-card shadow="hover" style="width: 100%">
    <el-space direction="vertical" style="width: 100%">
      <el-row>
        <el-col :span="2">
          <el-text type="primary">出行日期</el-text>
        </el-col>
        <el-col :span="2">
          <div>
            <el-date-picker
              v-model="localSearchConditions.departureTime"
              type="date"
              placeholder="请选择你的出行日"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            >
              <template #default="cell">
                <div class="cell" :class="{ current: cell.isCurrent }">
                  <span class="text">{{ cell.text }}</span>
                  <span v-if="isHoliday(cell)" class="holiday" />
                </div>
              </template>
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-text type="primary">车次类型</el-text>
        </el-col>
        <el-col :span="2">
          <el-button @click="selectAllTrainType">全部</el-button>
        </el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="localSearchConditions.trainType">
            <el-checkbox v-for="type in TRAIN_TYPE" :key="type.value" :label="type.label" :value="type.value" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-text type="primary">出发车站</el-text>
        </el-col>
        <el-col :span="2">
          <el-button>全部</el-button>
        </el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="localSearchConditions.departureStation">
            <el-checkbox v-for="station in departureStations" :key="station" :label="station" :value="station" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-text type="primary">到达车站</el-text>
        </el-col>
        <el-col :span="2">
          <el-button>全部</el-button>
        </el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="localSearchConditions.targetStation">
            <el-checkbox v-for="station in targetStations" :key="station" :label="station" :value="station" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-text type="primary">车次席别</el-text>
        </el-col>
        <el-col :span="2">
          <el-button>全部</el-button>
        </el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="localSearchConditions.seatType">
            <el-checkbox v-for="type in SEAT_TYPE" :key="type.value" :label="type.label" :value="type.value" />
          </el-checkbox-group>
        </el-col>
      </el-row>
    </el-space>
  </el-card>
</template>

<style scoped lang="scss">
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}

.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.cell.current .text {
  background: #626aef;
  color: #fff;
}

.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-primary);
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>